<template>
	<div id="Complete">
		
		<el-form
		  :inline="true"
		  ref="ruleForm"
		  :model="formInline"
		  :rules="rules" 
		  class="demo-form-inline"
		>
		  <el-form-item label="关键字" prop="keyWord">
		    <el-input v-model="formInline.keyWord" placeholder="关键字"></el-input>
		  </el-form-item>
		  <el-form-item label="发起日期" prop="RageDate">
		    <el-date-picker
		      v-model="formInline.RageDate"
		      type="daterange"
		      range-separator="至"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期"
		      :default-time="['00:00:00', '23:59:59']"
		    >
		    </el-date-picker>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="onSubmit('ruleForm')">查询</el-button>
		  </el-form-item>
		</el-form>
		
		<el-row :gutter="20">
			<el-col :span="4">
				<el-divider content-position="left">请选择节点</el-divider>
				<el-select class="mb-10" v-model="selevalue" placeholder="全部" @change="handleNodeClick">
					<el-option v-for="item in dataTree" :key="item.label" :label="item.label" :value="item.WorkID">
					</el-option>
				</el-select>

			</el-col>
			<el-col :span="20">
				<el-table :data="tableData" height="80vh" style="width: 100%" row-key="WorkID" default-expand-all
					:row-class-name="tableRowClassName"
					:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
					<el-table-column prop="Title" label="标题" fixed min-width="250">
						<template slot-scope="scope">
							<span v-if="scope.row.type!=null">{{scope.row.Title}}</span>
							<span v-else>
								<el-link :underline="false" @click="sikpMyflow(scope.row)" type="primary">
									{{scope.row.Title}}
								</el-link>
							</span>
						</template>

					</el-table-column>
					<el-table-column prop="StarterName" label="发起人" width="80" align="center">
					</el-table-column>
					<el-table-column prop="DeptName" label="发起部门" width="150" align="center">
					</el-table-column>
					<el-table-column prop="FlowName" label="流程类型" align="center">
					</el-table-column>
					<el-table-column prop="RDT" label="发起时间" width="160" align="center">
					</el-table-column>
					<el-table-column prop="SendDT" label="完成时间" width="160" align="center">
					</el-table-column>
					<el-table-column label="操作" width="100" align="center">
						<template slot-scope="scope">
							<el-button v-show="scope.row.type==null" @click="DialogOpen(scope.row)" type="primary"
								size="mini" plain>轨迹</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="handleClose">
			</trackox>
		</el-dialog>
	</div>
</template>

<script>
	import trackox from './components/track.vue' // 轨迹
	export default {
		name: "complete",
		components: {
			trackox,
		},

		data() {
			return {
				title: "已完成",
				data: {},
				dialogFormVisible: false, //弹出框显示
				titile: '', //标题
				  formInline: {
					keyWord: "",
					RageDate:''
				  },
				   rules: {},
				tableData: [],
				dataTree: [],
				total: 0, // 总数
				currentPage: 1, // 当前页
				pageSize: 15, //一页显示的行数
				selevalue: ''
			};
		},

		beforeCreate() {},

		created() {
			this.loadData();
		},

		methods: {
			tableRowClassName({
				row
			}) {
				if (row.type === null)
					return '';

				if (row.type === 1) {
					return 'success-row';
				}
				return '';
			},
			// 获取数据
			loadData() {
				let handler = new this.HttpHandler("BP.WF.HttpHandler.WF");
				let data = handler.DoMethodReturnString("Complete_Init");
				if (data.indexOf("err@") != -1) {
					this.$message.error(data);
					console.log(data);
					return;
				}
				this.data = JSON.parse(data);
				//this.paging();
				this.filterData();

			},

			// 分页
			paging() {
				this.total = this.tableData.length;
				let start = (this.currentPage - 1) * this.pageSize;
				let end = this.currentPage * this.pageSize;
				let arr = this.tableData.slice(start, end);
				//this.filterData(arr);
			},

			// 过滤数据
			filterData() {
				this.tableData = [];
				var flowNos = "";
				this.data.forEach(item => {
					this.tableData.push(item);
					if (flowNos.indexOf(item.FK_Flow + ",") == -1) {
						/* this.tableData.push({
							Title:item.FlowName,
							WorkID:parseInt(item.FK_Flow),
							type:1,//流程
							children:this.GetChildren(item.FK_Flow,data)
						}); */
						var childrenWork = this.GetChildren(item.FK_Flow);
						this.dataTree.push({
							label: item.FlowName + " (" + childrenWork.length + ")",
							name: item.FlowName,
							WorkID: parseInt(item.FK_Flow),
							childrenWork: childrenWork,
							count: childrenWork.length,
							//type:1,//流程
							//children:this.GetChildren(item.FK_Flow,data)
						});

						flowNos += item.FK_Flow + ",";
					}

				});
				//this.paging();
				//	console.log(this.tableData);
			},

			GetChildren(flowNo) {
				var data = [];
				this.data.forEach(item => {
					if (item.FK_Flow == flowNo) {
						if (item.TodoEmps.indexOf(',') != -1)
							item.TodoEmps = item.TodoEmps.substring(item.TodoEmps.indexOf(',') + 1);
						data.push(item);
					}

				});
				return data;
			},
			handleNodeClick(data) {
				console.log(data);
				//this.tableData = data.childrenWork;
				this.tableData = this.GetChildren(data);
				//this.GetChildren(data.name,data.childrenWork)
				//this.paging();
			},

			// 查询
			onSubmit() {},
			handleSizeChange(val) {
				this.pageSize = val;
				this.currentPage = 1;
				this.paging();
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.paging();
				console.log(`当前页: ${val}`);
			},
			//跳转到jflow页面
			sikpMyflow(work) {
				let params = {};
				params.WorkID = work.WorkID;
				params.FK_Flow = work.FK_Flow;
				params.FK_Node = work.FK_Node;
				params.FID = work.FID;
				params.FromPage = 'Complete';
				console.log(params);
				this.$router.push({
					name: "myView",
					params
				});

			},
			DialogOpen: function(rowData) {
				this.$store.commit('setData', rowData);
				// 如果是轨迹图 先请求接口
				this.title = "查看轨迹图";
				this.dialogFormVisible = true;
				this.judgeOperation = "track";

			},
			//关闭
			handleClose() {
				this.dialogFormVisible = false;
				this.judgeOperation = '';
			}
		},

		//监听
		computed: {},

		//监听后执行动作
		watch: {}
	};
</script>

<style lang="less" scoped>
	// /deep/ .el-collapse {
	// 	border: none;
	// }

	// /deep/ .el-collapse-item__wrap {
	// 	border: none;
	// }

	// /deep/ .el-pagination {
	// 	text-align: right;
	// 	margin: 20px 0;
	// }
	.mb-10 {
		margin-bottom: 10px;
		;
	}
</style>
